<template>
  <div class="container">
    <template v-if="loaded">
      <navbar theme="transparent" :fixed="true"></navbar>
      <list>
        <cell>
          <x-image :src="imageSrcMap[key]" :width="750"></x-image>
        </cell>
        <cell class="go-container">
          <animation type="bounceIn" duration="2000" delay="1000">
            <x-image :src="imageSrcMap.go" @click="goTo"  :width="400"></x-image>
          </animation>
        </cell>
        <cell>
          <div style="flex-direction: row; justify-content: center">
            <div class="kl-container">
              <div class="kl-text-wrapper">
                <text class="kl-text">{{klText}}</text>
              </div>
              <div>
                <div class="kl-text-btn">
                  <x-image :src="imageSrcMap.copyKl" @click="copyKl" :width="400"></x-image>
                </div>
              </div>
              <div class="kl-tip">
                <text class="kl-tip-text">分享好友，好友下单，一起省钱网购</text>
              </div>
            </div>
          </div>
        </cell>
        <cell>
          <div style="align-items: center; flex-direction: column">
            <div class="kf-container">
              <x-image src="http://mz.imgs.laxiaoke.com/operation/02f5e0f2-652d-4b90-989f-90b2693b5868.jpeg" :width="400"></x-image>
              <div style="height: 10px;"></div>
              <text class="kf-tip-text">添加辣小客客服小懒咪微信</text>
              <text class="kf-tip-text">获取更多双十一独家优惠</text>
              <div style="height: 50px;"></div>
            </div>
          </div>
        </cell>
      </list>
    </template>
    <page-loading :loaded="loaded"></page-loading>
  </div>
</template>
<script>
require('./include/page-xdom')
let api = require('./include/api')
let urlPath = require('./include/url-path')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')
let clipboard = weex.requireModule('clipboard')
let queryparser = require('./include/queryparser')
module.exports = {
  mixins: [
    require('./mixin/page-loading')
  ],
  components: {
    navbar: require('./components/navbar.vue'),
    xinput: require('./components/input.vue'),
    'x-image': require('./components/x-image.vue'),
    'animation': require('./components/animation.vue')
  },
  data () {
    return {
      imageSrcMap: {
        go: urlPath.assets('images/11/02/go.png'),
        copyKl: urlPath.assets('images/11/02/copy-kl.png'),
        zhc: urlPath.assets('images/11/02/zhc.png'),
        jhs: urlPath.assets('images/11/02/jhs.png'),
        nz: urlPath.assets('images/11/02/nz.png'),
        spsx: urlPath.assets('images/11/02/spsx.png'),
        tmcs: urlPath.assets('images/11/02/tmcs.png'),
        tmgj: urlPath.assets('images/11/02/tmgj.png')
      },
      hallMainList: [
        {key: 'zhc'},
        {key: 'jhs'},
        {key: 'tmgj'}
      ],
      hallSubList: [
        {key: 'nz'},
        {key: 'spsx'},
        {key: 'tmcs'}
      ],
      activityUrl: '',
      kl: '',
      klText: '',
      loaded: false,
      promotionMap: {
        zhc: {
          id: '1539329391766',
          text: '上亿红包天天领，每日3次机会，复制掏口令{klText}去掏♂寳，最高领取1111元红包！ '
        },
        jhs: {
          id: '1571984088821',
          text: '聚划算预售会场，复制掏口令{klText}去掏♂寳，付定金最高减400元！'
        },
        nz: {
          id: '1571984088833',
          text: '大牌女装会场，复制掏口令{klText}去掏♂寳，1元抢百元券！'
        },
        spsx: {
          id: '1571984088831',
          text: '食品生鲜会场，复制掏口令{klText}去掏♂寳，限时1元秒杀！'
        },
        tmcs: {
          id: '1571120794520',
          text: '天猫超市会场，复制掏口令{klText}去掏♂寳，限时抢第2件0元！'
        },
        tmgj: {
          id: '1571984088817',
          text: '天猫国际预售会场，复制掏口令{klText}去掏♂寳，全球爆款抢先定！ '
        }
      },
      key: 'zhc'
    }
  },
  computed: {
    klText () {
      return this.kl
    }
  },
  beforeDestroy () {

  },
  created () {
    let cfg = weex.config
    let params = queryparser(cfg.bundleUrl)
    this.key = params.key
    api.tbk.activityLink({
      promotionSceneId: this.promotionMap[this.key].id,
      klText: this.promotionMap[this.key].text,
      logo: this.imageSrcMap[this.key]
    }).done(rs => {
      this.loaded = true
      const { activityUrl, kl } = rs.data
      this.activityUrl = activityUrl
      this.kl = kl
      this.buildKlText()
    })
  },
  methods: {
    goTo () {
      let aliTradeService = weex.requireModule('aliTradeService')
      aliTradeService.couponPage({
        url: this.activityUrl,
        adzoneId: '',
        unionId: '',
        pid: '',
        openType: 'native'
      })
    },
    copyKl () {
      if (!this.klText) {
        return
      }
      clipboard.setString(this.klText)
      modal.toast({message: '口令已复制到剪贴板', duration: 0.5})
    },
    gotoSubMall () {
      let dom = weex.requireModule('dom')
      dom.scrollToElement(this.$refs.subMall)
    },
    buildKlText () {
      this.klText = this.promotionMap[this.key].text.replace('{klText}', this.kl)
    }
  }
}
</script>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/icon";
  @import "./sass/buttons";
  @import "./sass/activeable";
  @import "./sass/form";
  @import "./sass/utilities";

  .container {
    background-color: #ff5239;
  }

  .kf-container {
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
  }
  .kf-tip-text {
    text-align: center;
    font-size: 28px;
    color: #ededed;
  }

  .kl-tip {
    padding-top: 30px;
    &-text {
      text-align: center;
      font-size: 32px;
      color: #ff0833;
      padding-top: 10px;
      padding-bottom: 50px;
    }
  }

  .kl-text {
    font-size: 32px;
    color: #666;
    &-btn {
      flex-direction: row;
      justify-content: center;
      opacity: 1;
      &:active {
        opacity: .5;
      }
    }
    &-wrapper {
      height: 200px;
    }
  }

  .kl-container {
    width: 650px;
    @include border(2px, solid, #f9d382);
    border-radius: 10px;
    padding: 60px;
    background-color: #ffffff;
  }

  .go-container {
    padding: 30px;
    flex-direction: row;
    justify-content: center;
  }

  .btn-center {
    flex-direction: row;
    justify-content: center;
    padding-bottom: 50px;
    padding-top: 30px;
  }

  .hall-cell {
    flex-direction: row;
    justify-content: center;
    margin-bottom: 30px;
  }

  .tabbar {
    background-color: #01051f;
    height: 100px;
    align-items: center;
    flex-direction: row;
    padding: 0 20px;
    &-text {
      color: #7e7b3f;
      margin-right: 20px;
      &-active {
        color: #ffffff;
      }
    }
  }
</style>
